<template>
    <scroll-view class="page" :scroll-y="true" :style="scrollStyle" @scroll="handleScroll">
        <hj-navbar title="营销情况概况" />
        <!-- 头像名称信息 -->
        <UserInfo :isShowMall="true" />
        <!-- 饼状图 -->
        <PieChart :scrollTop="scrollTop" />
        <!-- 近五个月的柱状图 -->
        <BarChart :scrollTop="scrollTop" />
        <!-- 近期招收学员展示 -->
        <StudentDisplay />
        <!-- 安全底部 -->
        <hj-safe-footer />
    </scroll-view>
</template>

<script setup>
/**
 * @description 营销情况概况页面
 * @author yinzhi
 * @date 2025-03-13
 */
import { ref, computed, defineComponent } from 'vue'
import { IMAGES_URL } from '@/libs/common/baseUrl.js'
import PieChart from './components/PieChart.vue'
import BarChart from './components/BarChart.vue'
import UserInfo from '../spread/components/UserInfo.vue'
import StudentDisplay from './components/StudentDisplay.vue'
// 引入组件
defineComponent({
    components: {
        PieChart,
        BarChart,
        UserInfo,
        StudentDisplay
    }
})

// 样式
const scrollStyle = computed(() => {
    return {
        background: `linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(${IMAGES_URL}home-bg.jpg) no-repeat center`,
        backgroundSize: 'cover'
    }
})

// 页面滚动距离
const scrollTop = ref(0)
// 页面滚动事件
const handleScroll = e => {
    scrollTop.value = e.detail.scrollTop
}
</script>

<style scoped lang="scss">
.page {
    position: relative;
    background-color: transparent;
}
</style>
